<template>
    <div>
        <div class="container">
            <h1>货架信息</h1>
            <el-divider></el-divider>
            <div class="selevesTable">
                <el-table :data="shelvesList">
                    <el-table-column label="仓库货架总数" prop="shelves_sum"></el-table-column>
                    <el-table-column label="每个货架层数" prop="shelf_layers"></el-table-column>
                    <el-table-column label="每层货架放置快件个数" prop="layer_num"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">重置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <el-dialog title="修改信息" center :visible.sync="dialog" width="30%">
                <el-form :model="form" :rules="ruleForm" ref="form" label-width="100px">
                    <el-form-item label="货架总数量">
                        <el-input v-model="form.shelves_sum" placeholder="请输入一共有多少货架"></el-input>
                    </el-form-item>
                    <el-form-item label="货架层数">
                        <el-input v-model="form.shelf_layers" placeholder="请输入每个货架有多少层"></el-input>
                    </el-form-item>
                    <el-form-item label="每层能够放置数量">
                        <el-input v-model="form.layer_num" placeholder="请输入每层能够放置快件数"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="update()" center>确定</el-button>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'ShelvesConf', // 数据
    data() {
        let validateInt = (rule, value, callback) => {
            if (value) {
                return callback(new Error('不能为空'));
            }
            const validateInt = /^[1-9]\d*$/;
            if (validateInt.test(value)) {
                return callback();
            } else {
                return callback(new Error('请输入正整数'));
            }
        };
        return {
            dialog: false,
            shelvesList: [
                {
                    shelves_id: '',
                    shelves_sum: '',
                    shelf_layers: '',
                    layer_num: ''
                }
            ],
            form: {
                shelves_sum: '',
                shelf_layers: '',
                layer_num: ''
            },
            ruleForm: {
                shelves_sum: [{ required: true, validator: validateInt, trigger: 'blur' }],
                shelf_layers: [{ required: true, validator: validateInt, trigger: 'blur' }],
                layer_num: [{ required: true, validator: validateInt, trigger: 'blur' }]
            }
        };
    }, // 方法
    methods: {
        // 修改组件显示
        handleClick(row) {
            //控制组件是否显示
            this.dialog = true;
            //回显数据
            this.form.shelves_sum = row.shelves_sum;
            this.form.shelf_layers = row.shelf_layers;
            this.form.layer_num = row.layer_num;
        },
        //获取货架信息
        getData() {
            this.$axios({
                method: 'get',
                url: 'shelves/query-all'
            }).then(res => {
                if (res.data.code == 1) {
                    this.shelvesList = res.data.data;
                } else {
                    this.$message.info(res.data.mess);
                }
            });
        },
        //重置
        update() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    let param = new URLSearchParams();
                    param.append('shelves_id', this.shelvesList.shelves_id);
                    param.append('shelves_sum', this.form.shelves_sum);
                    param.append('shelves_layers', this.form.shelves_layers);
                    param.append('layer_num', this.form.layer_num);
                    this.$axios({
                        method: 'put',
                        url: 'shelves/update',
                        data: JSON.stringify(this.param),
                        headers: { 'Content-Type': 'application/json' } //加上这个
                    }).then(res => {
                        if (res.data.code == 1) {
                            this.$message.success;
                            this.$router.go(0);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }, // 页面初始化生命周期函数
    created() {
        this.getData();
    }
};
</script>
// 样式
<style scoped>
</style>